<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <title>VUE-试验案例 - css background-image</title>
    <style>
      .fruits-container{width:120px;height: 120px; background-color:#ffcc66;}

    </style>
</head>
<body>
<div class="container" id="container">
    <div class="row">
        <div class="col-xs-6 col-xs-offset-3">
            <div class="panel panel-success">
                <div class="panel-heading">
                    VUE CSS-BACKGROUND-IMAGE 试验案例
                </div>
                <div class="panel-body">
                    <div id="todo-list-example">
                        <div class="row">

                            <div class="col-xs-4" v-for="(fruit,index) in fruits">
                                <div class="fruits-container"
                                    :style="{'background-image':'url('+fruit.url+')'}"
                                >
                                </div>
                            </div>

                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>

</div>

<script src="js/vue.js"></script>
<script>
    Vue.filter("get-url",function(e){
        return 'url('+e+')';
    });
    new Vue({
        el: '#container',


        data: {
            fruits:[
                {
                    name:"apple",
                    url:"img/apple.jpg"
                },
                {
                    name:"orange",
                    url:"img/orange.jpg"
                },
                {
                    name:"grape",
                    url:"img/grape.jpg"
                }

            ]


        },
        methods: {
            addNewTodo: function () {
                this.todos.push(this.newTodoText);
                this.newTodoText = ''
            },
            doThis:function(idx,event){
                var _index =event.target.getAttribute("data-index");
                this.currentIndex=_index;
                this.changeIndex(_index);
                console.log(_index)

            },
            clearItem:function(){


                this.menu.button.splice(this.currentIndex,1)
                this.currentIndex=0;
                this.changeIndex(this.currentIndex);
            },
            addItem:function(){
                if(this.menu.button.length >=3){return;}
                var o={
                    name:"菜单名称",
                    type:"click",
                    key:"news_id_0048",
                    clicked:false
                };
                this.menu.button.push(o);

            },
            showItem:function(){
                console.log(this.menu.button[0].name);
            },
            changeIndex:function(currentIndex){
                for(var i = 0 ;i <this.menu.button.length;i++){
                    if(i!=currentIndex){
                        this.menu.button[i].clicked =false;
                    }else{
                        this.menu.button[currentIndex].clicked =true;
                    }
                }

            }
        }
    })
</script>
</body>
</html>